<template>
  <div>
    <u-table
      ref="plTable"
      v-loading="loading"
      :height="tableHeight"
      row-key="id"
      use-virtual
      :big-data-checkbox="checked"
      :row-height="rowHeight"
      element-loading-background="rgba(0, 0, 0, 0.25)"
      element-loading-text="拼命加载中"
      border
    >
      <u-table-column v-if="isSelect" type="selection" width="55" :selectable="selectable" fixed />
      <template v-for="item in columns">
        <!--作用域具名插槽列表头-->
        <u-table-column
          v-if="item.slot"
          :key="item.key"
          :prop="item.prop"
          :label="item.label"
          :width="item.width || 'auto'"
          :fixed="item.fixed"
          :align="item.align || 'center'"
          :resizable="item.resizable"
          :show-overflow-tooltip="item.tooltip"
        >
          <template slot-scope="scope">
            <slot
              :name="item.prop"
              :item="scope.row"
              :$index="scope.$index"
            />
          </template>
        </u-table-column>
        <!-- 普通列表头 -->
        <u-table-column
          v-else
          :key="item.key"
          :prop="item.prop"
          :label="item.label"
          :width="item.width || 'auto'"
          :fixed="item.fixed"
          :align="item.align || 'center'"
          :resizable="item.resizable"
          :show-overflow-tooltip="item.tooltip"
          :render-header="renderHeader"
        />
        <!-- 操作列 -->
      </template>
      <template slot="empty">
        <div v-show="!loading" class="empty-text">
          <svg-icon icon-class="taken" class="svg-container" />
          <span class="empty-content">{{ emptyText }}</span>
        </div>
      </template>
    </u-table>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import promptMessage from '@/components/business/MultiLevelColums/promptMessage';
export default {
  name: 'SelectTable', // 多选框虚拟表格
  props: {
    data: { default: () => [], type: Array, required: true }, // 数据项
    columns: { default: () => [], type: Array, required: true }, // 列表项
    overflowProp: { default: () => [], type: Array }, // 过长数据隐藏的属性
    approvalStatus: { default: '', type: String }, // 过长数据隐藏的属性
    loading: { default: false, type: Boolean }, // 表格loading效果
    isSelect: { default: true, type: Boolean }, // 是否线上复选框
    emptyText: { type: String, default: '暂无数据' }
  },
  inject: ['getTableHeight'],
  data() {
    return {
      checked: true,
      rowHeight: 36
    };
  },
  computed: {
    tableHeight() {
      return this.getTableHeight();
    }
  },
  watch: {
    data(data) {
      // 设置表格数据
      this.$refs.plTable.reloadData(data);
    }
  },
  created() {
    this.init();
  },
  methods: {
    ...mapActions({ 'getFormulaList': 'diclist/getFormulaList' }),
    init() {
      this.getFormulaList();
    },
    renderHeader(h, { column }) {
      // console.log(column);
      if (column.level === 1 && column.label.trim() !== '行标签') {
        return h('div', [
          h('span', column.label),
          h(promptMessage, {
            props: { messages: column.label }
          })
        ]);
      }
      return h('span', column.label);
    },
    selectable (row, index) {
      if (row[this.approvalStatus] === 1) {
        return true;
      } else {
        return false;
      }
    },
    allSelection () {
      this.$refs.plTable.toggleAllSelection();
    },
    clearSelection () {
      this.$refs.plTable.clearSelection();
    },
    // 适用于多量的数据选中
    partRowSelections (state) {
      // 获取前面的500条数据。实际场景自己去给你要选中的数据
      const data = this.datas.slice(0, 500);
      // data是数据，state是选中还是取消选中
      this.$refs.plTable.partRowSelections(data, state);
    },
    // 适用于少量的数据选中,如果你要选择大量数据，请使用partRowSelections方法。
    toggleSelection(rows, type) {
      if (rows) {
        rows.forEach(row => {
          // 注意： 勾选方法与element不同哦
          // this.$refs.plTable.toggleRowSelection(row); // element表格是这样写的
          // 我们得这样写

          // 如果是固定选中
          if (type === '固定选中') {
          // toggleRowSelection方法参数不懂得去看文档api哦
            this.$refs.plTable.toggleRowSelection([
              {
                row: row,
                selected: true
              }
            ]);
          // 下面这是切换选中
          } else {
            this.$refs.plTable.toggleRowSelection([
              {
                row: row
              }
            ]);
          }
        });
      } else {
        this.$refs.plTable.clearSelection();
      }
    },
    // 获取复选框选中的行
    getCheckboxRecords () {
      // console.log(this.$refs.plTable.getCheckboxRecords());
      return this.$refs.plTable.getCheckboxRecords();
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .plTableBox {
  margin-top: 20px;
  .el-table thead {
    color: #333;
  }
  .el-table--medium td, .el-table--medium th {
    padding: 5px 0;
  }
  .el-table__empty-block{
    height: 100%;
  }
  .el-table__empty-text{
    position: absolute;
    left: 50%;
  }
  .empty-text {
    position: relative;
    height: 500px;
    text-align: left;
    line-height: 490px;
    font-size: 14px;
    margin-left: -85px;
  }
  .svg-container {
    display: inline-block;
    padding: 6px 5px 6px 0px;
    vertical-align: middle;
    width: 150px;
    height: 150px;
  }
  .empty-content {
    position: absolute;
    top: 86px;
    left: 46px;
  }
  .el-loading-mask {
    z-index: 2000 !important;
  }
}
</style>
